<template>
    <modal v-if="enabled" v-model="enabled" footer-hide draggable :mask-closable="false"
        class-name="OB-bitmapFonts-window" width="700">
        <template #header></template>
        <Tabs :animated="false" size="small">
            <TabPane :label="$t('文字')">
                <div class="OB-bitmapFonts-text">
                    {{$t('设计字体')}}：
                    <Select v-if="customFonts" v-model="currentFont" style="width:200px">
                        <Option v-for="item in customFonts" :value="item" :key="item.id" :label="item.name">
                        </Option>
                    </Select>
                    <Icon type="md-create" @click="rename" :size="18" color="black" />
                    <Icon type="md-add-circle" @click="addFonts" :size="18" color="green" />

                    <Poptip content="content" placement="bottom" confirm @on-ok="removeFont">
                        <Icon type="md-remove-circle" :size="18" color="red" />
                    </Poptip>
                    <br />
                    <canvas id="bitmapFontsCanvas" ref="bitmapFontsCanvas" :width="options.width || 20"
                        :height="options.height || 20"></canvas>
                    <div id="OB-bitmapFonts-settings" v-if="this.currentFont">
                        <!-- <i-input v-model="currentFont.name" placeholder="自定义字体名称" /> -->
                        {{$t('大小')}}：
                        <InputNumber :max="100" :min="3" v-model="currentFont.size" />
                        <br />
                        {{$t('字体')}}：
                        <Select v-model="currentFont.font" style="width:200px">
                            <Option v-for="item in avaliableFonts" :value="item" :key="item">{{ item }}
                            </Option>
                        </Select>
                        <br />
                        {{$t('亮度')}}： <Slider v-model="currentFont.luminance" :min="5" :max="250" :step="5"
                            style="width:70%">
                        </Slider><br />
                        <Checkbox v-model="currentFont.stroke">{{$t('描边')}}</Checkbox><br />
                    </div>
                    <div id="OB-bitmapFonts-chars">
                        {{$t('附加字库（慎用）')}}:
                        <RadioGroup v-if="currentFont" v-model="currentFont.additionalChinese">
                            <Radio label="none">
                                <span>无附加字库</span>
                            </Radio>
                            <Radio label="1000">
                                <span>1000常用汉字</span>
                            </Radio>
                            <Radio label="2000">
                                <span>2000常用汉字</span>
                            </Radio>
                            <Radio label="3000">
                                <span>3000常用汉字</span>
                            </Radio>
                            <Radio label="4000">
                                <span>4000常用汉字</span>
                            </Radio>
                            <Radio label="5000">
                                <span>5000常用汉字</span>
                            </Radio>
                            <Radio label="6000">
                                <span>6000常用汉字</span>
                            </Radio>
                            <Radio label="all">
                                <span>全部汉字</span>
                            </Radio>
                        </RadioGroup>
                        {{$t('自定义字符')}}
                        <textarea v-model="customChatStr" ref="customChatStr" @mouseup="showSelectCustomChar"
                            @onkeyup="showSelectCustomChar"
                            :style="{width:'100%','max-height':'250px',fontFamily:currentFont.font}"></textarea>


                        <Grid v-if="currentFont" :col="16" center padding="3px" square
                            :style="{fontFamily:currentFont.font,padding:'5px'}">
                            <GridItem @click="displayChar=c" v-for="c in Array.from(currentFont.customChars)">{{c}}
                            </GridItem>
                        </Grid>
                        <!-- <Tabs :animated="false" size="small">
                            <TabPane :label="$t('必选字符')">
                                <Grid :col="16" center padding="3px" square>
                                    <GridItem @click="displayChar=c" v-for="c in requiredChat">{{c}}</GridItem>
                                </Grid>
                            </TabPane>
                            <TabPane :label="$t('自定义字符')">
                                <textarea v-model="customChatStr" ref="customChatStr" @mouseup="showSelectCustomChar"
                                    @onkeyup="showSelectCustomChar" style="width:100%;max-height:250px"></textarea>

                                <Grid :col="16" center padding="3px" square>
                                    <GridItem @click="displayChar=c" v-for="c in customChars">{{c}}</GridItem>
                                </Grid>
                            </TabPane>
                        </Tabs> -->
                    </div>
                    <div style="margin-top:5px;float:left;">友情链接：
                        <a target="_blank" style="margin-right: 15px;" href="http://hanzidb.org/">汉字数据库</a>
                        <a target="_blank" style="margin-right: 15px;" href="https://hanzi.unihan.com.cn/">书同文汉字网</a>
                        <a target="_blank" style="margin-right: 15px;" href="https://zd.hwxnet.com/">文学网|在线新华字典</a>
                    </div>
                </div>
            </TabPane>
            <TabPane :label="$t('图像')">开发中，敬请期待！</TabPane>
        </Tabs>
    </modal>
</template>